<template>
        <div class="column">
          <header>专栏订阅</header>
          <div style="width:1.5rem;height: 0.4rem;margin: 0.22rem 0rem 0.14rem 0.13rem" class="title">
            <div style="color: #1b8970;">热门专区</div>
            <div style="color: #62a593">HOT ZONE</div>
          </div>
          <div class="box">
            <Loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore"
              :bottom-pull-text="bottomPullText" :autoFill="false">
              <ul class="list">
                <div class='mc' v-if="noData">
                  <img src="../image/noDate.png" alt="">
                  <p style="font-size: 12px;color: rgb(131, 131, 131)">专家优质视频病历正在制作中...</p>
                  <p style="font-size: 14px;color: rgb(102, 102, 102)">敬请期待</p>
                </div>
                <li v-for='(item,index) in list' :key='index' v-if="list.length>0">
                  <a @click="gotocolumndetail(item.id)">
                    <img :src="item.pic" width="58" height="58" style="margin: 0rem 0rem 0rem 0.12rem;" />
                    <div>
                      <div>
                        <h3>{{item.sname}}</h3>
                      </div>
                      <p style="font-size: 10px;">
                        <i v-text="$utils.goodTime(item.time)"></i>
                      </p>
                      <p>简介:{{item.content}}</p>
                      <span>
                      </span>
                    </div>
                  </a>
                </li>
      
              </ul>
            </Loadmore>
          </div>
        </div>
      </template>
      <script>
        import {
          Loadmore
        } from 'mint-ui';
      
        import isLogin from '../utils/index.js'
        export default {
          data() {
            return {
              noData: false,
              type: '',
              list: [],
              sentPage: {
                page: 1, //分页累加
              }, //接口入参
              totalNum: 0, //总数据条数
              allLoaded: false, //分页数据是否已经加载完毕
              bottomPullText: "上拉加载数据哦~", //上拉提示信息
            }
          },
          components: {
            Loadmore
          },
          methods: {
            //记录滚动位置
            setScrollTop(e) {
              localStorage.setItem("scrollTop", e.target.scrollTop);
            },
            gotocolumndetail(id) {
              this.$router.push({
                name: 'columndetail',
                query: {
                  id: id
                }
              })
            },
            getColumnList(params) {
              var that = this;
              this.$api.post(this.$api.baseURLSchool, "special_page/special", params, r => {
                this.totalNum = r.data.records;
                if (r.data.ret == -3) {
                  localStorage.clear();
                  this.isLogin()
                }
                if (this.sentPage.page == 1) {
                  that.list = r.data.rows;
                } else {
                  that.list = that.list.concat(r.data.rows);
                }
                if (that.list.length == 0) {
                  that.noData = true;
                }
                if (r.data.rows.length == 0 && this.sentPage.page > 1) {
                  that.$utils._toast("暂无更多数据");
                }
              }, err => {
                console.log(err);
              })
            },
            //下拉刷新
            loadTop() {
              this.sentPage.page = 1;
              setTimeout(() => {
                this.getColumnList(this.sentPage);
                this.allLoaded = false;
              }, 20);
              this.$refs.loadmore.onTopLoaded();
            },
            //上拉加载
            loadBottom() {
              (this.sentPage.page) ++;
              setTimeout(() => {
                this.getColumnList(this.sentPage);
              }, 20);
              if (this.totalNum == this.list.length) {
                this.allLoaded = true;
              }
              this.$refs.loadmore.onBottomLoaded();
            },
      
            // 登录拦截
            isLogin() {
              this.userid = localStorage.getItem("loginMobile");
              if (!this.userid) {
                this.$router.push({
                  name: 'login1'
                })
                return false;
              } else {
                return true;
              }
            },
          },
          created() {
            this.isLogin()
            this.getColumnList(this.sentPage);
            this.type = JSON.parse(localStorage.getItem('type'));
          },
          //history模式下 返回会触发
          activated() {
            if (localStorage.getItem("scrollTop")) {
              $('.column').scrollTop(localStorage.getItem("scrollTop"));
            }
      
          },
      
        }
      
      </script>
      <style lang="scss" scoped>
        .mc {
          padding: 40px 0;
          margin: auto;
          position: absolute;
          left: 50%;
          top: 40%;
          transform: translate(-50%, -50%);
      
          img {
            display: block;
            margin: 0 auto;
          }
      
          p {
            padding-top: 10px;
            text-align: center;
          }
        }
      
      </style>
      